<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getProductNames, submitProductPlan } from '@/api/mrp'

// 表单数据
const formData = ref({
  productMaterialNo: '',
  productionQuantity: '',
  deliveryDate: '',
  planName: ''
})

// 计算结果相关数据
const calculationResults = ref([])
// 产品名称选项
const productOptions = ref([])

// 获取产品名称列表 - 用于表单下拉列表
const fetchProductNames = async () => {
  try {
    const response = await getProductNames();
    productOptions.value = response.data.map(item => ({
      value: item.materialNo,
      label: item.name
    }));
    console.log(productOptions.value);
  } catch (error) {
    ElMessage.error('获取产品列表失败')
  }
}

// 提交表单
const submitForm = async () => {
  if (!formData.value.productMaterialNo || !formData.value.productionQuantity || 
      !formData.value.deliveryDate || !formData.value.planName) {
    ElMessage.warning('请填写完整表单信息')
    return ;
  }
  try {
    const response = await submitProductPlan(formData.value);
    calculationResults.value = response.data.results;
    console.log(response.data);
    ElMessage.success('提交成功')
    // 可以在这里处理返回的数据
  } catch (error) {
    ElMessage.error('提交失败')
  }
}

// 清空表单
const resetForm = () => {
  formData.value = {
    productMaterialNo: '',
    productionQuantity: '',
    deliveryDate: '',
    planName: ''
  }
}


// 初始化数据
onMounted(() => {
  fetchProductNames();
})
</script>

<template>
  <div class="mrp-page">
    <!-- 顶部表单区域 -->
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span>MRP计算表单</span>
        </div>
      </template>
      
      <el-form :model="formData" label-width="120px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生产产品名称">
              <el-select 
                v-model="formData.productMaterialNo" 
                placeholder="请选择产品"
                style="width: 100%"
              >
                <el-option
                  v-for="item in productOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="生产数量">
              <el-input 
                v-model="formData.productionQuantity" 
                placeholder="请输入生产数量"
                type="number"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="提货日期">
              <el-date-picker
                v-model="formData.deliveryDate"
                type="date"
                placeholder="请选择提货日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="计划名">
              <el-input 
                v-model="formData.planName" 
                placeholder="请输入计划名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">计算</el-button>
          <el-button @click="resetForm">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 计算结果区域 -->
    <el-card class="results-card">
      <template #header>
        <div class="card-header">
          <span>计算结果</span>
        </div>
      </template>
      
      <div class="results-header" v-if="calculationResults.length > 0">
        <el-tag type="success">生产计划: {{ formData.planName }}</el-tag>
      </div>
      
      <el-table 
        :data="calculationResults" 
        style="width: 100%" 
        stripe
        border
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="materialName" label="物料名称" />
        <el-table-column prop="productionMethod" label="生产方式" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="orderDate" label="下单日期"  />
        <el-table-column prop="completionDate" label="到货日期" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.mrp-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100%;
}

.form-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.results-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}

.results-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>